<template>
  <div >
    <div >
      <p style="margin-top: 20px;margin-bottom :40px; pxmargin-left: 40px;font-size: 20px">商品添加</p>
      <div >
        <el-form :model="list" label-width="80px">
          <el-form-item label="商品名称">
            <el-input  placeholder="请输入商品名称" v-model="list.name"></el-input>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input  placeholder="请输入商品描述" v-model="list.subtitle"></el-input>
          </el-form-item>
          <el-form-item label="所属分类">
            <el-select v-model="list.region" @change="Change" placeholder="请选择一级品类">
              <el-option
                v-for="(item,index) in options"
                :key="index"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
            <el-select v-if="list.region" v-model="list.region2"  placeholder="请选择一级品类">
              <el-option
                v-for="(item,index) in options1"
                :key="index"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input  class="inp" placeholder="价格" v-model="list.price">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品库存">
            <!-- stock -->
            <el-input  class="inp" placeholder="库存" v-model="list.stock">
              <template slot="append">件</template>
            </el-input>
          </el-form-item>
          <el-upload
            class="upload-demo"
            name="upload_file"
            action="/api/product/upload.do"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            v-model="list.subImages"
            multiple
            :limit="3"
            :on-success="handleSuccess"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <quill-editor
            ref="myQuillEditor"
            v-model="list.detail"
            :options="editorOption"
            style="background-color: #fff;"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)">

          </quill-editor>
        </el-form>
        <el-button type="primary" plain @click="add()">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
    import {add,cook,img} from "../../api/index.js";
    export default {
        name: "goodAdd",
        data(){
          return{
            list:{
              categoryId: 0,
              name: "",
              subtitle: "",
              stock: "",
              region2: "",
              region: "",
              subImages: "",
              detail: "",
              price: "",
              status: 1,
            },
            options:[],
            options1:[],
            content: '<h2>I am Example</h2>',
	          // 富文本编辑器配置
	          editorOption: {
		          modules: {
			          toolbar: [
				          ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
				          ["blockquote", "code-block"], // 引用  代码块
				          [{ header: 1 }, { header: 2 }], // 1、2 级标题
				          [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
				          [{ script: "sub" }, { script: "super" }], // 上标/下标
				          [{ indent: "-1" }, { indent: "+1" }], // 缩进
				          [{ direction: "rtl" }], // 文本方向
				          [
					          {
						          size: [
							          "12",
							          "14",
							          "16",
							          "18",
							          "20",
							          "22",
							          "24",
							          "28",
							          "32",
							          "36"
						          ]
					          }
				          ], // 字体大小
				          [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
				          [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
				          // [{ font: ['songti'] }], // 字体种类
				          [{ align: [] }], // 对齐方式
				          ["clean"], // 清除文本格式
				          ["image", "video"] // 链接、图片、视频
			          ]
		          },
		          placeholder: "请输入正文"
	          },
            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
          }
        },
      mounted() {
        this.ok()
      },
      methods:{
        handleSuccess(response, file, fileList) {
          this.list.subImages = response.data.uri;
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          this.list.subImages=file.name
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },
        onEditorBlur(quill) {
          console.log('editor blur!', quill)
        },
        onEditorFocus(quill) {
          console.log('editor focus!', quill)
        },
        onEditorReady(quill) {
          console.log('editor ready!', quill)
        },
        onEditorChange({ quill, html, text }) {
          console.log('editor change!', quill, html, text)
          this.content = html
        },
          ok(){
            add(this.list.categoryId).then((res)=>{
              this.options=res.data
            })
        },
        Change(k){
        console.log(k);
          this.options.map((item,i)=>{
            console.log(item.id);
            if(item.name===k){
              add(item.id).then((res)=>{
                console.log(res);
                this.options1=res.data
              })
            }
          })
        },
        add(){
            cook(this.list).then(res=>{
              console.log(res);
              this.$message( {
                message:res.data,
                type:"message"
              });
              this.$router.push("/good")
            })
        }
      },
      computed: {
        editor() {
          return this.$refs.myQuillEditor.quill
        }
      },
    }
</script>

<style scoped>

</style>
